<template>
  <div v-if="!props.isMobile">
    <div class="_box-container">
      <ul>
        <li v-for="item in props.battle?.box_list || []" :key="item.id">
          <img :src="item.image" />
        </li>
      </ul>
    </div>
    <div class="_battle-info _text-small">
      <div class="_mode">{{ props.battle?.mode }}</div>
      <div>{{ battleStatusText }}</div>
      <div class="flex items-center">
        <span class="mr-0.2rem">Total Cost:</span>
        <span class="text-primary"> ${{ props.battle.cost_amount }} </span>
      </div>
    </div>
  </div>
  <div v-else class="_battle-header text-0.88rem">
    <div class="_mode">{{ props.battle?.mode }}</div>
    <div class="_box-container">
      <ul>
        <li v-for="item in props.battle?.box_list || []" :key="item.id">
          <img :src="item.image" />
        </li>
      </ul>
    </div>
    <div class="flex items-center justify-between">
      <div>{{ battleStatusText }}</div>
      <div class="flex items-center">
        <span class="mr-0.2rem">Total Cost:</span>
        <span class="text-primary"> ${{ props.battle.cost_amount }} </span>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { BattleDetailStatus } from "@/enum/battle";

import { battleHeaderProps } from "./battleHeader";

const props = defineProps(battleHeaderProps);

const battleStatusText = computed(() => {
  const status = props.battle.status;
  if (status === BattleDetailStatus.BattleWait) {
    return `Wait time: ${props.battle.remain_seconds}s`;
  }
  if (status === BattleDetailStatus.BattleComplete) {
    return "Battle Completed";
  }
  if (status === BattleDetailStatus.Battleing) {
    return `Round ${props.battle.crt_round} / ${props.battle.total_round}`;
  }
  return "";
});
</script>

<style lang="less" scoped>
._box-container {
  @apply flex items-center justify-center;
  ul {
    @apply flex list-none p-0 m-0;
    gap: 0.31rem;
    max-width: calc(3.5rem * 6 + 0.31rem * 5);
    overflow: hidden;
    li {
      flex-shrink: 0;
      width: 3.5rem;
      aspect-ratio: 3.5 / 5.31;
      min-height: 0;
      img {
        @apply w-full h-full;
        object-fit: contain;
      }
    }
  }
}

._battle-info {
  @apply flex items-center justify-between;
  margin-top: 0.94rem;
}

._mode {
  padding: 0.63rem 0.75rem;
  background: #353636;
  border-radius: var(--el-border-radius-base);
}

._battle-header {
  ._box-container {
    justify-content: start;
    margin: 0.88rem 0 0.63rem;
    overflow: auto;
    ul {
      gap: 0.19rem;
      li {
        width: 2.31rem;
        aspect-ratio: 2.31 / 3.5;
      }
    }
  }

  ._mode {
    display: inline-block;
  }
}
</style>
